<template>
    <div ref="statisticsRef">
        <el-card>
            <div class="flex items-center justify-between">
                <div class="text-14px bold">数据汇总</div>
                <customSelectDate :date-value="1" v-model:value-list="dateList" />
            </div>
            <div v-for="(i, index) in listdata" :key="index" class="mg-t-16">
                <div class="fs-14 title-through">{{ i.name }}</div>
                <div class="flex gap-8px mt-16px">
                    <div class="flex flex-1 justify-between" :class="{ 'flex-item': item.name }" v-for="(item, index) in i.data"
                        :key="index">
                        <div class="flex-1 mt-16px ml-16px">
                            <div class="text-14px fc-lightgrey mb-10px">{{ item.name }}</div>
                            <div v-if="item.value || item.value === 0" class="flex flex-ai-end">
                                <CountUp class="text-24px bold fm-din-bold" :decimalPlaces="item.decimal || 0" :end-val="item.value" />
                                <span class="text-12px ml-5px lh-24px">{{ item.suffix }}</span>
                            </div>
                            <div v-else-if="item.value === 0 || item.value === ''" class="text-24px bold">--</div>
                        </div>
                        <div>
                            <img class="img" crossorigin="anonymous" :src="getAssetUrl(item.icon)" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import wnumb from 'wnumb'
import CountUp from 'vue-countup-v3'
import { getPaySaleAchievement, getPayOperate } from '@/api/dashboard/sasspay.ts'

const statisticsRef = ref(null)

const format = wnumb({
    thousand: ','
})
const props = defineProps({
    title: {
        type: String
    },
    list: {
        type: Array
    },
    type: {
        type: String,
        default: ''
    },
    selectValue: {
        type: [String, Number]
    },
    queryData: {
        type: Object
    }
})

const emits = defineEmits(['update:selectValue', 'change'])

const dateList = ref([])

const listdata = ref({
    operation: {
        name: '销售数据',
        data: {
            saleTotalMoney: {
                name: '销售总额',
                value: '',
                suffix: '元',
                icon: 'pie01',
                decimal: 2
            },
            firstAmount: {
                name: '首签金额',
                value: '',
                suffix: '元',
                icon: 'pie02',
                decimal: 2
            },
            renewalAmount: {
                name: '续签金额',
                value: '',
                suffix: '元',
                icon: 'pie03',
                decimal: 2
            },
            openAccountAmount: {
                name: '开户金额',
                value: '',
                suffix: '元',
                icon: 'pie04',
                decimal: 2
            },
            salesNumber: {
                name: '销售笔数',
                value: '',
                suffix: '笔',
                icon: 'pie05',
            }
        }
    },
    project: {
        name: '运营数据',
        data: {
            openCustomer: {
                name: '开通客户',
                value: '',
                suffix: '位',
                icon: 'bar01'
            },
            payNum: {
                name: '发薪笔数',
                value: '',
                suffix: '笔',
                icon: 'bar02',
                decimal: 2
            },
            paidMoney: {
                name: '发薪金额',
                value: '',
                suffix: '元',
                icon: 'bar03',
                decimal: 2
            },
            paidCount: {
                name: '已领薪人数',
                value: '',
                suffix: '人',
                icon: 'bar04'
            },
            payMoneyCount: {
                name: '已领薪金额',
                value: '',
                suffix: '元',
                icon: 'bar05',
                decimal: 2
            },
        }
    },
    other: {
        name: '其他数据',
        data: {
            longTimeProjectCount: {
                name: '需打卡',
                value: '',
                suffix: '项',
                icon: 'line01'
            },
            quickProjectCount: {
                name: '快速发薪项目',
                value: '',
                suffix: '项',
                icon: 'line02'
            },
            dailyProjectCount: {
                name: '无打卡项目',
                value: '',
                suffix: '项',
                icon: 'line03'
            },
            pcProjectCount: {
                name: 'PC发薪项目',
                value: '',
                suffix: '项',
                icon: 'line04'
            },
            e: {
                name: '',
                value: null,
                suffix: '',
                icon: ''
            },
        }
    }
})

const getAssetUrl = (imgName) => {
    return new URL(`../../../../assets/image/dashboard/${imgName}.png`, import.meta.url).href
}

// const emitsData = () => {
//     emits('update:selectValue', sltVal.value);
//     emits('change', sltVal.value);
// }

const handleChange = () => {
    emitsData()
}

const getData = () => {
    getPaySaleAchievement({
        ...props.queryData,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : ''
    }).then(res => {
        for(const key in listdata.value.operation.data) {
            listdata.value.operation.data[key].value = res[key]
        }
    })
}

const getOtherData = () => {
    getPayOperate({
        ...props.queryData,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : ''
    }).then(res => {
        for(const key in listdata.value.project.data) {
            listdata.value.project.data[key].value = res.operationalData[key]
        }
        for(const key in listdata.value.other.data) {
            listdata.value.other.data[key].value = res.projectCount[key]
        }
    })
}

watch(dateList, (newval) => {
    if (newval?.length) {
        getData()
        getOtherData()
    }
}, {
    immediate: true
})

defineExpose({
    statisticsRef,
    getData,
    getOtherData
})
</script>
<style lang="scss" scoped>
.flex-item {
    background: #FAFAFC;
    border-radius: 5px;
    // padding: 16px;
    position: relative;
}

.title-through {
    position: relative;

    &::after {
        display: block;
        content: '';
        width: calc(100% - 70px);
        height: 1px;
        background: #F4F4F7;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.img {
    // position: absolute;
    // right: 0;
    // top: 0;
    // width: 48px;
    // height: auto;
}</style>